Webツール.jp HTMLに高機能なコメントシステム

コメントシステム

HTMLにコメント欄を設けたいと思ったことはないですか?

その想いをかなえるコメントシステムがついに完成しました!百聞は一見にしかず、早速サンプルサイトをご確認ください。

http://webツール.jp/sample.html ※別窓で開きます。

どうですか?システムをアップロードして設定を少し、あとは既存のHTMLファイルに3行追加するだけでコメント欄を付けられます。管理画面はこちらです。

http://webツール.jp/comsys/ ※別窓で開きます。

管理画面は極力シンプルに直感で操作できるようにまとめています。色々と変更してオリジナル性を高めることも可能ですが、初期設定のままでもそのまま使えます。説明不要なぐらい簡単、シンプルに作っているので使い方自体はサンプルを色々と触るだけでわかると思うのですが、動かすまでが少しだけ手間が掛かります。

コメントシステムの動作環境

コメントシステムはPHPプログラムで動きます。PHP5.4でも動くようですが、PHP5.6と7.0で動作確認を行っています。また、HTMLでPHPが動くように.htaccessに数行の記述が必要です。そのほか、ちょっとした注意点がございます。

HTMLの文字コードがShift_Jisだと文字化けをしてしまいます。これはPHPを使っているのでしょうがない部分です。最近はUTF-8でのサイト作成が標準となってきているので最近のサイトであれば問題ないと思うのですが、Shift_Jisで作られたサイトであればKanjiTranslatorのようなフリーソフトでUTF-8(BOM無し)に変更してください。

次にXHTMLですが、1行目に<?xml version="1.0" encoding="Shift_Jis(UTF-8)"?>このような記述があれば削除してください。以上、問題がなければいよいよ設定です。まずは体験版をダウンロードしてください。体験版はログインしてから14日間の使用期限が設定されています。ライセンスを購入することで無期限となるので、欲しいな~と思ったら是非購入してください。

コメントシステム体験版(ログインから14日間の制限付き)download

コメントシステムの動作設定

フォルダを解凍したらコメントシステム本体の他に、Xサーバー、ファイアーバードサーバー、さくらレンタルサーバー用のサンプルファイルが入ったフォルダも入っています。

フォルダを解凍したところ。         Xサーバフォルダのなかはこんな感じ。

コメントシステム サンプル

Xサーバーやファイアーバード、さくらレンタルサーバーを使用するときは各フォルダ内に入っているファイルを使用するとわかりやすいと思うのですが、まずは解説を最後まで読んでください。

最初にコメントシステム本体の設定を行います。comsysフォルダ内のconfig.phpを開きます。Windows標準のメモ帳は使えないので注意してください。Crescent Eveのようなテキストエディタの使用をお願いします(Windowsのメモ帳は何かと問題があるのです)。BOMを付けないエディタであれば問題ありません。よくわからないときはCrescent Eveを使用してください。

5~7行目の以下の部分を使用するサーバーやドメインの設定に変更します。サンプルはXサーバーでの設定です。サーバーIDは契約しているサーバーのIDになります。

変更したら保存し、comsysフォルダを丸ごとサーバーへアップロードします。index.htmlと同じ階層にcomsysフォルダをアップしてください。同じく、post_confirmation.html、jump.htmlもindex.htmlと同じ階層にアップします。

コメントシステムの階層

この状態でhttp://ドメイン/comsys/にアクセスするとログイン画面が現れます。

もし現れない場合はhttp://ドメイン/comsys/index.phpにアクセスしてみてください。これでもログイン画面が現れないようならconfig.phpの記述が誤っているので使用のサーバーの仕様を確認してください。PHPのバージョンが5.6 or 7.0で、config.phpの記述に誤りがなければログイン画面が現れます。

コメントシステムログイン画面

次にHTMLファイルに以下の3行を追加します。まずは1行目にこの1行。こちらもconfig.phpと同じく使用するサーバーのパスを書いてください。

<?php require_once "/home/サーバーID/example.com(ドメイン)/public_html/comsys/config.php";?>

ちょっと長い1行ですが、パスはconfig.phpの6行目、HOMEPATHに記述したパスに/config.phpが付いただけです。次に<head>に次の1行を追加します。こちらはJQueryを使用するための1行なので、すでに記述していれば追加する必要はありません。最近のサイトはJQueryを使って動きを持たせるのが流行っているので、すでに記載している場合も多いと思います。

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>

最後に、コメントを挿入したいところへ下記の1行を追加します。

<?php include HOMEPATH. "/comments.php"; ?>

同梱のsample.htmlも参考にしてください。sample.htmlは1行目のパスだけ変更すれば設定完了するようになっています。しかし、これだけではまだコメント欄は現れません。

.htaccessを変更してHTMLでPHPが動くするようにする必要があります。Xサーバーだと以下のように記述します。

.htaccess変更前

.htaccess変更後

XサーバーはPHPを5.6や7.0に設定すると自動で変更前の記述が.htaccessに書き込まれます。一度.htaccessをダウンロードし、変更後のように書き換えてアップすればHTMLでもPHPが動くようになり、sample.htmlにコメント欄が現れます。

Xサーバー、ファイアーバード、さくらレンタルサーバーはサンプルとなるconfig.php、.htaccessの記述、sample.htmlがそれぞれ各フォルダに入っているので参考にしてください。さくらレンタルサーバーはphp.cgiも入っています。こちらはさくらレンタルサーバー独自の仕様となっており、HTMLでPHPを動かすときに必要となるファイルです。index.htmlと同じ階層にアップしてパーミッションを705にしてください。

上手く設置できないとき

問題の切り分けが大事です。まずはcomsysにアクセスしてログイン画面が現れるかどうか確認してください。comsysはPHPファイルのままなので、ログイン画面が現れないときはconfig.phpの記述が間違っているかPHPのバージョンが古いかのどちらかです。

ログイン画面は現れるもののsample.htmlにコメント欄が現れないときはsample.htmlに記述するパスに間違いがあるか、.htaccessの記述が間違っています。

ボタンなど上手く動作しないとき

リロード(更新)して再度行うと問題なく動きます。ボタンなどHTMLの動きの部分はブラウザで動くJQuery(JavaScript)を使用しています。ブラウザでプログラムを動かしているので、読み込みや負荷によってエラーが起こったり上手くいかないこともありますが、リロードして読み直すと問題なく動きます。本体はPHPなので、サーバーの性能や負荷によって動作速度が変わってきます。

コメントシステム体験版(ログインから14日間の制限付き)download

コメントシステム ライセンス価格

Webツール BASE店

1ドメイン制なのでページ数に制限はありません。登録には使用するドメインをお知らせいただく必要がございます。アダルトや公共良俗に反するサイトなど、登録をお断りする場合もございます。お知らせいただいたドメインは登録作業以外に使用することはございません。複数ドメインをまとめて登録いただくとお得な割引となっています。